<template>
	<gracePage statusBarBG="#1CA376" class="main-bodybg-color" headerBG="#1CA376" :bounding="false">
		<view slot="gHeader">
			<!--  演示一个渐变背景，请根据项目实际需求自行改进  -->
			<view class="grace-header-body " style="background-color:#1CA376" footerBg="#000">
				<text class="grace-header-icons grace-white"></text>
				<view class="grace-header-content-noflex grace-white text-center" style="font-size: 40rpx;">个人中心</view>
				<text class="grace-header-icons grace-white"></text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" class="main-bodybg-color">
			<view class="height-200 main-bg-color">
				<view class="grace-header-body grace-relative ">
					<!-- 头像 -->
					<!-- <view class="grace-list-image ucenter-face grace-relative ml-2-5" @click="gotoPage('/pages/homeBox/userContre/userContre')"> -->
					<view class="grace-list-image ucenter-face grace-relative ml-2-5">
						<image :src="loginStatus ? userInfo.user_picture : '../../static/images/noLogin.png'" class="grace-list-image grace-img-lazy" mode="widthFix"></image>
						<image
							:src="userInfo.user_rank | filterRank"
							v-if="loginStatus"
							style="width:40rpx;height: 47rpx;position:absolute; right:0; bottom:0;"
							mode="widthFix"
						></image>
					</view>
					<!-- 信息 -->
					<view class="">
						<view class=" py-1-5 pl-2" v-if="loginStatus">
							<view>
								<text class="grace-h6 grace-white">会员昵称：{{ userInfo.user_name || '' }}</text>
							</view>
							<view>
								<text class="font-size-24 pt-1 grace-white">推荐人：{{ userInfo.parent_name || '' }}</text>
							</view>
							<view>
								<text class="font-size-24 pt-1 grace-white">注册时间：{{ userInfo.reg_time || '' }}</text>
							</view>
						</view>
						<view class="grace-wrap grace-white pl-2" v-else>
							<text class="grace-white grace-h4" @click="gotoPageLogin('/pages/login/register')">注册</text>
							<text class="grace-white px-1 grace-h4">/</text>
							<text class="grace-white grace-h4" @click="gotoPageLogin('/pages/login/login')">登录</text>
						</view>
					</view>
				</view>
			</view>
			<view class="height-100"></view>
			<view class="mx-2-5 my-class-top grace-bg-white border-radius-15 main-border-radius-small">
				<view class="px-2 grace-border-b">
					<view class="grace-list-items">
						<view class="ucenter-face">
							<view class="grace-nowrap">
								<view class="grace-nowrap"><text class="grace-title grace-h4">我的订单</text></view>
								<view class="border-1"></view>
							</view>
						</view>
						<view class="grace-list-body "></view>
						<view class="grace-nowrap grace-flex-center" @click="gotoPage('/pages/order/orderList/orderList?index=0')">
							<text class="grace-h6 main-size-color" style="line-height: 50rpx;">全部订单</text>
							<text class="grace-list-arrow-right grace-icons">&#xe601;</text>
						</view>
					</view>
				</view>
				<view class="grace-grids grace-margin-top  my-1">
					<view class="grace-grids-items five" @click="gotoPage('/pages/order/orderList/orderList?index=1')">
						<image class="grace-grids-icon-img-my" src="/static/images/home/class1.png" mode="widthFix" lazy-load></image>
						<text class="grace-grids-text font-sm grace-black6">待付款</text>
					</view>
					<view class="grace-grids-items five" @click="gotoPage('/pages/order/orderList/orderList?index=3')">
						<image class="grace-grids-icon-img-my" src="/static/images/home/class2.png" mode="widthFix" lazy-load></image>
						<text class="grace-grids-text font-sm grace-black6">待收货</text>
					</view>
					<view class="grace-grids-items five">
						<image class="grace-grids-icon-img-my" src="/static/images/home/class3.png" mode="widthFix" lazy-load></image>
						<text class="grace-grids-text font-sm grace-black6">待拼团</text>
					</view>
					<view class="grace-grids-items five" @click="gotoPage('/pages/order/orderAppraise/orderAppraise')">
						<image class="grace-grids-icon-img-my" src="/static/images/home/class4.png" mode="widthFix" lazy-load></image>
						<text class="grace-grids-text font-sm grace-black6">评价</text>
					</view>
					<view class="grace-grids-items five" @click="gotoPage('/pages/order/orderAfterSale/orderAfterSale')">
						<image class="grace-grids-icon-img-my" src="/static/images/home/class5.png" mode="widthFix" lazy-load></image>
						<text class="grace-grids-text font-sm grace-black6">退货/售后</text>
					</view>
				</view>
			</view>
			<view class="mx-2-5 mt-2-5 grace-bg-white border-radius-15 main-border-radius-small">
				<view class="border-radius-15">
					<graceBoxBanner
						:border="['dashed', '#D8D8D8', '1px']"
						:color="['#1CA376', '#999999', '#595959']"
						:fontSize="['38rpx', '24rpx', '20rpx']"
						background="#FFFFFF"
						:items="items"
						@taped="taped"
					></graceBoxBanner>
				</view>
			</view>
			<view class="mx-2-5 mt-2-5 grace-bg-white border-radius-15 main-border-radius-small">
				<view class="grace-list-items" @click="gotoPage('/pages/homeBox/yunCang/yunCang')">
					<!-- <text class="grace-list-icon grace-icons grace-green">&#xe612;</text> -->
					<view><image src="../../static/images/home/YunCang.png" class="grace-list-icon p-1 ml-2"></image></view>
					<view class="grace-list-body">
						<view class="grace-list-title"><text class="grace-list-title-text">礼包云仓</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
			<view class="mx-2-5 mt-2-5 grace-bg-white border-radius-15 main-border-radius-small">
				<view class="grace-list-items" @click="gotoPage('/pages/homeBox/myFriend/myFriend')">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title"><text class="grace-list-title-text">我的好友</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="gotoPage('/pages/homeBox/shareOrder/shareOrder')">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title"><text class="grace-list-title-text">分享订单</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="gotoPage('/pages/homeBox/redPacket/redPacket')">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title"><text class="grace-list-title-text">我的红包</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="gotoPage('/pages/homeBox/integral/integral')">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title"><text class="grace-list-title-text">我的积分</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="gotoPage('/pages/homeBox/groupBooking/groupBooking')">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title"><text class="grace-list-title-text">我的拼团</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="gotoPage('/pages/homeBox/crowdfunding/crowdfunding')">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title"><text class="grace-list-title-text">我的众筹</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="gotoPage('/pages/homeBox/collection/collection')">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title"><text class="grace-list-title-text">我的收藏</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="gotoPage('/pages/homeBox/addressList/addressList')">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title"><text class="grace-list-title-text">地址管理</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="gotoPage('/pages/login/agreement?status=1')">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title"><text class="grace-list-title-text">规则协议</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="gotoPage('/pages/message/msgPage/msgPage')">
					<view class="grace-list-body">
						<view class="grace-list-title"><text class="grace-list-title-text">消息中心</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
			<view class="mx-2-5 mt-2-5 mb-5 grace-bg-white border-radius-15 main-border-radius-small">
				<view class="grace-list-items" @click="gotoPage('/pages/homeBox/setUp/setUp')">
					<view class="grace-list-body">
						<view class="grace-list-title"><text class="grace-list-title-text">设置</text></view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceBoxBanner from '../../components/myVue/graceBoxBanner.vue';
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			openHeader: false,
			oneGoStatus: true,
			items: []
		};
	},
	computed: {
		...mapState({
			loginStatus: state => state.user.loginStatus,
			userInfo: state => state.user.userInfo
		})
	},
	onShow() {
		this.items = [[this.userInfo.balance, '', '共创津贴'], [this.userInfo.balance_no, '', '销售津贴'], [this.userInfo.user_money, '', '可提现']];
		console.log('this.items’', this.items);
	},
	onLoad: function() {},
	onPageScroll(e) {
		if (e.scrollTop > 100) this.openHeader = true;
		else this.openHeader = false;
	},
	methods: {
		...mapActions(['getUserInfo']),
		toNavigateTo(url) {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: url,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		gotoPage(url) {
			// console.log(this.loginStatus)
			if (this.loginStatus) {
				if (this.oneGoStatus) {
					this.oneGoStatus = false;
					uni.navigateTo({
						url: url,
						complete: () => {
							this.oneGoStatus = true;
						}
					});
				}
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		},
		gotoPageLogin(url) {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: url,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		taped(index) {
			if (!this.loginStatus) {
				if (this.oneGoStatus) {
					this.oneGoStatus = false;
					uni.navigateTo({
						url: '/pages/login/login',
						complete: () => {
							this.oneGoStatus = true;
						}
					});
				}
			} else {
				if (index == 0 && this.oneGoStatus) {
					this.oneGoStatus = false;
					uni.navigateTo({
						url: '/pages/homeBox/togetherAllowance/togetherAllowance',
						complete: () => {
							this.oneGoStatus = true;
						}
					});
				} else if (index == 1 && this.oneGoStatus) {
					this.oneGoStatus = false;
					uni.navigateTo({
						url: '/pages/homeBox/marketAllowance/marketAllowance',
						complete: () => {
							this.oneGoStatus = true;
						}
					});
				} else if (index == 2 && this.oneGoStatus) {
					this.oneGoStatus = false;
					uni.navigateTo({
						url: '/pages/homeBox/application/application',
						complete: () => {
							this.oneGoStatus = true;
						}
					});
				}
			}
		}
	},
	onPullDownRefresh() {
		// 判断是否登录
		if (this.loginStatus) {
			this.getUserInfo();
		}
		uni.stopPullDownRefresh();
	},
	filters: {
		filterRank(value) {
			let url = '';
			switch (value) {
				case '6':
					return 'https://zhenzhixiao.cn/index/images/rank6.png';
					break;
				case '7':
					return 'https://zhenzhixiao.cn/index/images/rank7.png';
					break;
				case '8':
					return 'https://zhenzhixiao.cn/index/images/rank8.png';
					break;
			}
			return url;
		}
	},
	components: {
		gracePage,
		graceBoxBanner
	}
};
</script>
<style scoped>
.grace-list-image {
	width: 120rpx;
	height: 120rpx;
}

.demo-content {
	font-size: 28rpx;
	line-height: 35rpx;
	height: 30rpx;
	overflow: hidden;
	text-align: center;
}
.height-200 {
	height: 200rpx;
	background-color: #1ca376;
}
.height-100 {
	height: 100rpx;
	background-color: #1ca376;
}
.grace-grids-icon-img-my {
	width: 48rpx;
	height: 48rpx;
}
.grace-grids-items {
	width: 140rpx;
}
.my-class-top {
	margin-top: -80rpx;
}
.grace-list-arrow-right {
	width: 70rpx;
	text-align: center;
}
</style>
